<template>
  <div class="flex flex-wrap gap-4">
    <el-card style="width: 50%" shadow="always">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="标题" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><Postcard /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="内容" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.content }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>是否公开</span>
              <el-switch
                v-model="scope.row.status"
                style="margin-left: 10px"
                @change="ChangeFn(scope.row.title, scope.row.content, scope.row.status,scope.row.id)"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <el-dialog v-model="dialogVisible" title="编辑" width="500">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input v-model="ruleForm.content" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="ruleForm.status" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
//@ts-ignore
import { getList, editItem, deleteItem } from '@/api/list'
import { ref, reactive, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

interface User {
  title: string
  id: number
  status: boolean
  content: string
}
const dialogVisible = ref(false)

let resid = 0
const handleEdit = (index: number, row: User) => {
  dialogVisible.value = true
  resid = row.id
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
  deleteItem(row.id).then(() => {
    loadList()
  })
}

// const tableData: User[] = [
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]
const tableData = ref<User[]>([])

function loadList() {
  getList().then((res) => {
    console.log(res)

    tableData.value = res.data
  })
}
loadList()

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  title: '',
  content: '',
  status: false
})

const rules = reactive<FormRules<typeof ruleForm>>({
  title: [{ trigger: 'blur', message: '请输入标题' }],
  content: [{ trigger: 'blur', message: '请输入内容' }],
  status: [{ trigger: 'blur', message: '请输入状态' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.alert('提交成功', '提示', {
        confirmButtonText: '确定'
      })

      editItem(resid, ruleForm.title, ruleForm.content, ruleForm.status).then((r) => {
        loadList()
      })
      dialogVisible.value = false
    } else {
      console.log('error submit!')
    }
  })
}

function ChangeFn(title: any, content: any, status: any,id: number) {
  editItem(id, title, content, status).then(() => {
    loadList()
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang="css">
.icon {
  display: flex;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
}
</style>
